<!-- Tree -->
<template>
  <div>
    <v-text-field
      dense
      v-model="search"
      flat
      label="搜索模块"
      solo-inverted
      hide-details
      clearable
      ></v-text-field>
      <!-- append-outer-icon="settings" @click:append-outer="$router.push({ name: 'Category' })" -->
    <!-- multiple-active -->
    <v-treeview
      color="warning"
      activatable
      dense
      open-all
      :items="items"
      item-key="cid"
      item-disabled="disabled"
      :search="search"
      :filter="filter"
      :active="value"
      @input="inputHandle"
      @update:active="activeChanged"
      hoverable>
      <!-- <template v-slot:prepend="{ item, open }">
        <v-icon v-if="item.children">
          {{ open ? 'folder_open' : 'folder' }}
        </v-icon>
      </template> -->
      <template v-slot:append="{ item }">
        <v-icon v-if="item.redirect ==='yes' ">link</v-icon>
      </template>
    </v-treeview>
  </div>
</template>

<script>
import { fetchTreeData } from '@/api/admin/category.js'
export default {
  name: 'CategoryTree',
  components: {},
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data: function () {
    return {
      search: '',
      items: []
    }
  },
  created: function () {
    fetchTreeData().then(res => {
      this.items = res.data.map(e => {
        e.disabled = (e.status === 'disabled' || e.redirect === 'yes')
        return e
      })
    })
  },
  computed: {
    filter: function() {
      return (item, search, textKey) => {
        return item.name.indexOf(search) > -1
      }
    }
  },
  methods: {
    inputHandle: function(active) {
      this.$emit('input', active)
    },
    activeChanged: function(active) {
      this.$emit('input', active)
      this.$emit('refreshdata')
    }
  }
}
</script>
